<template>
    <div class="reg">
      <div class="register" style="color: white;">注册</div>
      <div class="x" @click="closeForm">x</div>
      <el-form :model="regForm" status-icon :rules="rules" ref="regForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号">
          <el-input v-model="regForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="regForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="regForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from 'vuex'
import {Register} from '../request/api'
export default {
  name: 'App',
  data(){
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.regForm.checkPass !== '') {
            this.$refs.regForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.regForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
    return{
        regForm: {
          username:'',
          password: '',
          checkPass: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        },
        params:{
          username:'',
          password:''
        }
    }
  }
  ,computed:{
    ...mapState({
      showReg:state => state.registerStatus.showReg,
    })
  },
  methods:{
    ...mapActions({
      asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast',
    }),
    ...mapMutations({
      setReg:'registerStatus/setReg'
    }),
    // 重置
    reset(){
      this.regForm.username = ''
      this.regForm.password = ''
      this.regForm.checkPass = ''
    },
    // 提交
    async handleSubmit(){
      // 发送请求
      this.params.username = this.regForm.username
      this.params.password = this.regForm.password
      console.log(this.params)
      if(this.params.username != '' && this.params.password != '' && this.regForm.password == this.regForm.checkPass){
        let res = await Register(this.params)
        if(res.data.state == 200){
        // 提示成功
        this.asyncChangeIsShowToast({
          msg:'注册成功',
          type:'success'
        })
        // 关闭表单
        this.setReg(false)
        this.reset()
      }else{
        // 失败
        this.asyncChangeIsShowToast({
          msg:res.data.message,
          type:'error'
        })
        this.setReg(false)
        this.reset()
      }
      }else{
        // 失败
        this.asyncChangeIsShowToast({
          msg:'注册失败！',
          type:'error'
        })
      }
      
    },
    // 关闭
    closeForm(){
      this.setReg(false)
    }
  }
}
</script>

<style scoped>
.reg{
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #112d4e;
  /* border: 1px solid whitesmoke; */
  border-radius: 10px;
  padding: 20px;
  font-size: 16px;
}
.register{
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}
.x{
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 20px;
  cursor: pointer;
}
</style>
